<template>
  <div>
    <!-- <div style="width: 50%">
          <el-form ref="form" :model="formData" label-width="70px" size="small" style="margin-top: 5%;margin-left: 5%">
              <el-row :gutter="24">
                <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
                  <div class="tableAuto">
                    <el-table border v-loading="tableLoading" :data="tableData1" style="width: 100%" :header-cell-style="{background:'#EAEBEC'}">
                      <el-table-column prop="phaseName" label="阶段名称" align="left"></el-table-column>
                      <el-table-column prop="state" :label="$t('recipe.state')" align="left"></el-table-column>
                    </el-table>
                  </div>
                  <div class="btnfang" style="text-align:center;margin-top:18px">
                    <el-button :disabled="(stepObj.isActive != 1 || button1 || phaseIsdis) || isStep || isoperation == 1" type="primary" size="small" @click="handleEditPhaseStatus(10,'启动')">{{ $t("run.start_up") }}</el-button>
                    <el-button v-if="isInfoPhase" :disabled="stepObj.isActive != 1 || button2 || phaseIsdis || isStep || isoperation == 1 || stepObj.phaseCode == 'PH_TEM'" size="small" @click="handleEditPhaseStatus(20,'暂停')">暂 停</el-button>
                    <el-button v-if="isInfoPhase" :disabled="stepObj.isActive != 1 || button3 || phaseIsdis || isStep || isoperation == 1 || stepObj.phaseCode == 'PH_TEM'" size="small" @click="handleEditPhaseStatus(21,'重启')">重 启</el-button>
                    <el-button v-if="isInfoPhase" :disabled="stepObj.isActive != 1 || button3 || phaseIsdis || isStep || isoperation == 1 || stepObj.phaseCode == 'PH_TEM'" size="small" @click="handleEditPhaseStatus(50,'退出')">退 出</el-button>
                    <el-button v-if="isSHowstopBtn" :disabled="stepObj.isActive != 1 || button4 || phaseIsdis || isStep || isoperation == 1" size="small" @click="handleEditPhaseStatus(40,'完成')">完 成</el-button>
                  </div>
                </el-col>
              </el-row>
          </el-form>

        </div> -->
    <div class="tableAuto">
      <el-form ref="form" :model="formData" label-width="70px" size="small">
        <el-row :gutter="20">
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" style="padding-top:10px">
            <el-form-item :label="$t('recipe.equipment')" label-width="40px" class="w-100">
              <el-select v-model="formData.equipment" placeholder="" clearable>
                <el-option v-for="(item,index) in equipmentList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" style="padding-top:10px">
            <el-form-item :label="$t('basic.stage')" label-width="40px" class="w-100">
              <el-select v-model="formData.phase" placeholder="" clearable>
                <el-option v-for="(item,index) in phaseList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="3" :sm="2" :md="2" :lg="2" :xl="2" style="padding-top:10px">
            <el-form-item label-width="0px">
              <el-button type="primary" size="small" @click="handleSearch">{{ $t("common.query") }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table border :data="tableData" v-loading="tableLoading" style="width: 100%" :header-cell-style="{background:'#EAEBEC'}">
        <el-table-column prop="entName" :label="$t('recipe.equipment')" align="left" width="100">
          <template slot-scope="scope">
            {{scope.row.equipmentVo ? scope.row.equipmentVo.entName : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('basic.stage')" align="left" width="100">
          <template slot-scope="scope">
            {{scope.row.phaseVo ? scope.row.phaseVo.phaseDesc : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="paraName" :label="$t('basic.argu')" align="left" width="100"></el-table-column>
        <el-table-column prop="uom" :label="$t('basic.company')" align="left" width="100"></el-table-column>
        <el-table-column prop="target" :label="$t('run.formula_value')" align="left" width="100"></el-table-column>
        <el-table-column prop="adjust" :label="$t('run.set_value')" align=" left" width="100"></el-table-column>
        <el-table-column :label="$t('run.operation')" align="left">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleEdit(scope.row)" :disabled="stepObj.isActive != 1">确 认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-dialogDrag title="修改" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" :close-on-click-modal="false">
      <el-form :model="ruleForm" label-width="85px" ref="ruleForm" :rules="rules" size="small" :hide-required-asterisk="true">
        <el-row :gutter="24">
          <el-col :xs="24">
            <el-form-item :label="$t('recipe.equipment')" class="w-100">
              <el-select v-model="ruleForm.equipment" placeholder="" clearable>
                <el-option v-for="(item,index) in equipmentList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('basic.stage')" class="w-100">
              <el-select v-model="ruleForm.phase" placeholder="" clearable>
                <el-option v-for="(item,index) in phaseList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('basic.argu')" class="ItemCode" prop="name">
              <el-input v-model="ruleForm.name" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('basic.company')" prop="uom" class="w-100">
              <el-select v-model="ruleForm.uom" placeholder="" clearable>
                <el-option v-for="(item,index) in uomIdList" :key="index" :label="item.fid" :value="item.fid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('run.formula_value')">
              <el-input type="text" v-model="ruleForm.recipeValue" placeholder="" @change="forceUpdates()"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('run.to_set')">
              <el-input v-model="ruleForm.adjust" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="loading" :disabled="stepObj.isActive != 1" type="primary" size="small" @click="handleConfirm('ruleForm')">确
          认</el-button>
        <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { formula } from "@/api/formula"
import { configure } from "@/api/configure"
import { plc } from "@/api/plc";
export default {
  props: {
    stepObj: Object,
    count: Number,
    unitStat: Number,
    phaseIsdis: Boolean,
    formsSeqNo: [String, Number],
    isoperation: [Number, Object],
    idObj: Object,
    woId: String,
  },
  data () {
    return {
      tableData1: [{
        phaseName: "",
        mode: '',
        state: ''
      }],
      formData: {
        equipment: "",
        phase: ""
      },
      ruleForm: {
        equipment: "", //设备
        phase: "", //阶段
        name: "", //参数
        uom: "", //单位
        recipeValue: "", //配方值
        adjust: "", //设定
      },
      equipmentList: [],
      phaseList: [],
      tableData: ['', '', ''],
      tableLoading: false,
      dialogVisible: false,
      uomIdList: [],
      rules: {},
      loading: false
    }
  },
  watch: {
    count () {
      let arr = [16] //自动phase
      let arr1 = [17] //数据phase
      console.log(this.stepObj.serialNo)
      if (arr.indexOf(this.stepObj.serialNo) > -1 && this.stepObj.fid) {
        this.phaseAutoFind()
      } else if (arr1.indexOf(this.stepObj.serialNo) > -1 && this.stepObj.fid) {
        this.phaseDataList()
      } else {
        this.tableData = ['', '', '']
      }
    },
  },
  created () {
    this.getUomList()
  },
  computed: {
    isStep () {
      if (parseInt(this.stepObj.seqNo || 0) == this.formsSeqNo) {
        return false
      } else {
        return true
      }
    },
    isInfoPhase () {
      if (parseInt(this.stepObj.serialNo) === 0 || this.stepObj.serialNo == 7 || this.stepObj.serialNo == 8 || this.stepObj.serialNo == 4 || this.stepObj.serialNo == 6 || this.stepObj.serialNo == 9 || this.stepObj.serialNo == 10) {
        return false
      } else {
        return true
      }
    },
    isSHowstopBtn () {
      if (parseInt(this.stepObj.serialNo) === 0 || this.stepObj.serialNo == 7 || this.stepObj.serialNo == 8 || this.stepObj.serialNo == 4 || this.stepObj.serialNo == 5 || this.stepObj.serialNo == 6 || this.stepObj.serialNo == 9 || this.stepObj.serialNo == 10) {
        return true
      } else {
        return false
      }
    },
    // 6温度控制   9蒸馏-氮气置换  10 蒸馏-冷凝接收
    button1 () { //启动按钮
      let arr = ['1', '2', '3', '5', '11', '12']
      let arr1 = ['0', '7', '8', '4', '6', '9', '10']
      if (this.unitStat === 0 || this.unitStat == 11) {
        if (arr.indexOf(this.stepObj.serialNo) > -1) {
          return false
        } else if (arr1.indexOf(this.stepObj.serialNo) > -1) {
          return false
        } else {
          return true
        }
      } else if (this.unitStat == 51) {
        let arr2 = ['5', '1', '2', '3', '11', '12']
        if (arr2.indexOf(this.stepObj.serialNo) > -1) {
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    },
    button2 () { //暂停按钮
      let arr = ['5', '1', '2', '3', '11', '12']
      if (this.unitStat == 10) {
        if (arr.indexOf(this.stepObj.serialNo) > -1) {
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    },
    button3 () { //重启 终止
      let arr = ['5', '1', '2', '3', '11', '12']
      if (this.unitStat == 21) {
        if (arr.indexOf(this.stepObj.serialNo) > -1) {
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    },
    button4 () { //停止完成
      let arr = ['5']
      let arr1 = ['0', '7', '8', '4', '6', '9', '10']
      if (this.unitStat == 51) {
        if (arr.indexOf(this.stepObj.serialNo) > -1) {
          return false
        } else {
          return true
        }
      } else if (this.unitStat == 10) {
        if (arr1.indexOf(this.stepObj.serialNo) > -1) {
          return false
        } else {
          return true
        }

      } else if (this.unitStat == 21) {
        if (arr.indexOf(this.stepObj.serialNo) > -1) {
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    },
    isUnitConfirm () {
      let arr = [0, 4, 7, 8]
      if (arr.indexOf(parseInt(this.stepObj.serialNo)) > -1) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    // 获取计量单位列表
    getUomList () {
      const param = {
        page: 1,
        size: 9999
      }
      configure.getUomList(param).then(res => {
        if (res.code == 200) {
          this.uomIdList = res.data.rows
        }
      }).catch(e => {

      })
    },
    phaseAutoFind () {
      const param = {
        phaseId: this.stepObj.fid
      }
      this.tableLoading = true
      formula.phaseAutoList(param).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.rows
        }
        this.tableLoading = false
      })
    },
    phaseDataList () {
      const param = {
        phaseId: this.stepObj.fid
      }
      this.tableLoading = true
      formula.phaseDataList(param).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.rows
        }
        this.tableLoading = false
      })
    },
    handleSearch () {

    },
    handleEdit (row) {
      Object.assign(this.ruleForm, row)
      this.ruleForm.name = row.paraName
      this.$set(this.ruleForm, 'recipeValue', row.target)
      this.$set(this.ruleForm, 'equipment', row.phaseVo ? row.phaseVo.phaseDesc : '')
      this.$set(this.ruleForm, 'phase', row.equipmentVo ? row.equipmentVo.entName : '')
      this.$set(this.ruleForm, 'adjust', row.adjust)

      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    },
    handleConfirm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.adjust = parseFloat(this.ruleForm.adjust)
          const param = [{ ...this.ruleForm }]
          this.loading = true
          formula.phaseAutoAdd(param, '编辑').then(res => {
            this.loading = false
            if (res.code == 200) {
              this.phaseAutoFind()
              this.dialogVisible = false
              this.$message({ duration: 1000, type: 'success', message: '修改成功!' });
            } else {
              this.$message.error(res.msg);
            }
            this.loading = false
          })
        }
      })
    },

    handleEditPhaseStatus (type, txt) {
      if (!this.stepObj.fid) {
        this.$message.error('请选择阶段');
        return
      }
      let that = this
      this.$customConfirm({
        content: '是否要' + txt + '此阶段',
        onok () {
          const param = {
            fid: that.stepObj.fid,
            stateCd: type
          }
          plc.sendPlcCommandPhase(param).then(res => {
            if (res.code == 200) {
              that.$message({ duration: 1000, type: 'success', message: txt + '成功!' });
              if (type == 40 && that.stepObj.serialNo == 7) {
                that.submitDescribeCommand()
              }

            }
          })
        },
      })
    },
    queryPhase (state) {
      if (state == 10) {
        return this.$t('workorder.function')
      } else if (state == 11) {
        return this.$t('workorder.finish')
      } else if (state == 21) {
        return this.$t('workorder.suspend')
      } else if (state == 41) {
        return "结束"
      } else if (state == 51) {
        return "异常结束"
      } else if (state == 0) {
        return "准备"
      } else {
        return ""
      }
    },
    forceUpdates () {
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>
.tableAuto >>> .cell {
  height: 23px;
}
</style>